<template>
  <div>
    <div>
      <el-table v-loading="loading" :data="data">
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :label="item.name"
          :width="item.width"
          :align="item.align || config.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template #default="{ row, }">
            <slot v-if="item.slotName" :name="item.slotName" :row="row" />
            <p v-else>
              {{ row[item.prop] }}
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => {
        return { align: 'center' }
      }
    },
    loading: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      formDate: {},
      action: '/api/system/upload'
    }
  },
  watch: {
    loading: {
		  immediate: true,
      handler: function (newValue, oldValue) {
        this.loading = newValue
      },
      deep: true // 启用深度监听
    }
  },
  created () { },
  mounted () { },
  methods: {
    submitForm () {
      this.$refs.fromRef.validate((valid) => {
        if (valid) {
          this.$emit('submitForm', this.formDate)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    resetFields () {
      this.$refs.fromRef.resetFields()
    },

    handleAvatarSuccess (response, file, fileList, value) {
      this.formDate[value] = URL.createObjectURL(file.raw)
    },

    handleRemove (file, fileList) {
      console.log(file, fileList)
    },

    handlePictureCardPreview () { }
  }
}
</script>
